---
sidebar_position: 6
description: Fix common issues when using True Native Bottom Sheet.
keywords: [bottom sheet troubleshooting, fixing bottom sheet, debugging bottom sheet]
---

# Troubleshooting

## React Native Gesture Handler

[`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/docs/)

On Android, [RNGH does not work](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation/#usage-with-modals-on-android) by default because modals are not located under React Native Root view in native hierarchy. To fix that, components need to be wrapped with `GestureHandlerRootView`.

```tsx
import { GestureHandlerRootView } from 'react-native-gesture-handler'
```

```tsx {3-5}
return (
  <TrueSheet ref={sheet}>
    <GestureHandlerRootView style={{ flexGrow: 1 }}>
      <View />
    </GestureHandlerRootView>
  </TrueSheet>
)
```

:::info
Note that we are using `flexGrow` instead of `flex` here. For some weird reason, `flex` does not work correctly. See [below](#weird-layout-render).
:::

## Touch Events Not Working on Android

On physical Android devices, touch events on buttons and pressables inside TrueSheet may not fire correctly. This appears to be a React Native Fabric limitation with modals.

Related: [#163](https://github.com/lodev09/react-native-true-sheet/issues/163), [#288](https://github.com/lodev09/react-native-true-sheet/issues/288)

**Workarounds:**

1. Use touchable components from [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/docs/) instead of React Native's built-in components.

2. Set an explicit `width` on `GestureHandlerRootView` to fix first-render layout issues:

```tsx
import { useWindowDimensions } from 'react-native'
import { GestureHandlerRootView, TouchableOpacity } from 'react-native-gesture-handler'

const { width } = useWindowDimensions()

return (
  <TrueSheet ref={sheet}>
    <GestureHandlerRootView style={{ flexGrow: 1, width }}>
      <TouchableOpacity onPress={handlePress}>
        {/* ... */}
      </TouchableOpacity>
    </GestureHandlerRootView>
  </TrueSheet>
)
```

## Unable to Drag on Android

If sheet contains `ScrollView` and the content height is smaller than the sheet height, scrolling may not work properly due to a React Native framework limitation. This is because the `ScrollView` won't be scrollable when there's no overflow.

Related: [React Native PR #44099](https://github.com/facebook/react-native/pull/44099)

**Workarounds:**

1. Ensure your content height exceeds the sheet height, or use a `FlatList` with a minimum number of items.

2. Set the `ScrollView`'s `minHeight` to the sheet height + 1 on layout. The extra pixel ensures the content overflows, enabling the scroll behavior. Note that this does not work with `'auto'` detent:

```tsx
const [minHeight, setMinHeight] = useState<number>()

return (
  <TrueSheet
    detents={[0.5, 1]}
    onLayout={(e) => setMinHeight(e.nativeEvent.layout.height + 1)}
  >
    <ScrollView style={{ minHeight }} nestedScrollEnabled>
      <View />
    </ScrollView>
  </TrueSheet>
)
```

## Weird layout render

The sheet does not have control over how React Native renders components and may lead to rendering issues. To resolve this, try to minimize the use of `flex=1` in your content styles. Instead, use fixed `height` or employ `flexGrow`, `flexBasis`, etc., to manage your layout requirements.
